<script setup>

import ModelTestComp from "@/testCompGroupB/ModelTestComp.vue";
import {ref,onMounted} from "vue";

let testModel = ref('2');

let count=0;
function testtt(){
  testModel.value = testModel.value+''+(++count);
}

let sw = ref(false);
let displayRef = ref(`none`);

onMounted(()=>{
    let theCeshi = document.querySelector("#ceshi");
    theCeshi.addEventListener("mouseenter",()=>{
        displayRef.value=`block`;
    })

    theCeshi.addEventListener("mouseleave",()=>{
        displayRef.value=`none`;
    })
})
</script>

<template>
  {{testModel}}
  <button @click="testtt" id="cesh1" >cesi</button>
<ModelTestComp v-model="testModel"></ModelTestComp>

    <div id="ceshi" style="border: 1px solid;width: fit-content">
    <button @click="testtt" >ces11i</button>
    <div :class="{bb:displayRef!==`none`}" @click="sw=!sw" :style="{display:displayRef}"></div>
    </div>
</template>

<style scoped>
.aa{
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: #1e55dc;*/
}

.bb{
    animation: enlarging .3s ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    width: 200px;
    height: 300px;
    background-color: pink;
}


@keyframes enlarging {
    0%{
        width: 100px;
        height: 100px;
        background-color: #1e55dc;

    //white-space: nowrap;
    }

    100%{
        width: 200px;
        height: 300px;
        background-color: pink;
    }
}

</style>